<script setup>
import { ref } from 'vue';
let props = defineProps({
    control: Object,
    model: Object,
})
const showPicker = ref(false);

const onConfirm = (value) => {
    props.model[props.control.id] = value;
    showPicker.value = false;
};

</script>

<template>
    <van-field
        v-model="model[control.id]"
        is-link
        readonly
        :name="control.id"
        :label="control.props.label"
        :placeholder="control.props.placeholder"
        :clearable="control.props.clearable"
        :disabled="control.props.disabled"
        @click="showPicker = true"
        :rules="control.rules"
        :required="control.rules[0].required"
    />
    <van-popup v-model:show="showPicker" position="bottom">
        <van-datetime-picker type="time" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
</template>
